<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
		
			
			.imgdiv{
				position: absolute;
				width: 222px;
				height: 222px;
			}
			.imgdiv img{
				position: absolute;
			}
		</style>
	</head>
	 <body>
		<!--<div data-rotx="7" data-roty="4" class="imgdiv" style="top: 200px; left: 200px;">
			<img src="img/ch0.png" />
			<img src="img/ch1.png" />
			<img src="img/ch2.png" />
		</div>
		<div data-rotx="5" data-roty="8"  class="imgdiv" style="top: 0px; left: 0px;">
			<img src="img/ch0.png" />
			<img src="img/ch1.png" />
			<img src="img/ch2.png" />
		</div>-->
		<script type="text/javascript">
			function createImg () {
				
					var div = document.createElement("div");
					div.className = "imgdiv";
					div.style.top = "5px";
					div.style.left = "5px";
					div.setAttribute("data-rotx",(Math.random()*15)+5);
					div.setAttribute("data-roty",(Math.random()*15)+5);
					for (var k= 0;k<4;k++) {
						var img = document.createElement("img");
						img.src = "img/ch"+k+".png"
						div.appendChild(img);
					}
					document.body.appendChild(div);
				
			}
			var imgNum = 0;
			var id=setInterval(function(){
				createImg();
				imgNum++;
				if(imgNum==3){
					clearInterval(id);
				}
			},2000)
			setInterval(function  () {
				moveImg();
			},50);
			
			function moveImg () {
				var divs = document.getElementsByTagName("div");
				var Height = document.documentElement.clientHeight;
				var Width = document.documentElement.clientWidth;
				for (var i=0;i<divs.length;i++) {
					var rotx = parseInt(divs[i].getAttribute("data-rotx"));
					var roty = parseInt(divs[i].getAttribute("data-roty"));
					var top = parseInt(divs[i].style.top);
					var left = parseInt(divs[i].style.left);
					top += roty;
					left += rotx;
					divs[i].style.top = top + "px";
					divs[i].style.left = left+ "px"
					
//					console.log(top,left);
					if (top >= Height-222 ) {
						roty = -roty;
						setImgOpacity(divs[i]);
						divs[i].style.top = (Height - 222) + "px";
					}
					if (top<=0) {
						roty = -roty;
						setImgOpacity(divs[i]);
						divs[i].style.top = "0px"
					}
					if (left >= Width - 222) {
						rotx = -rotx;
						setImgOpacity(divs[i]);
						divs[i].style.left = (Width - 222) + "px";
					}
					if (left<=0) {
						rotx = -rotx;
						setImgOpacity(divs[i]);
						divs[i].style.left = "0px";
					}
//					setImgOpacity(divs[i]);
					divs[i].setAttribute("data-rotx",rotx);
					divs[i].setAttribute("data-roty",roty);
				}
			}
			function setImgOpacity (div) {
				var imgs = div.getElementsByTagName("img");
				for (var i=0;i<imgs.length;i++){
					imgs[i].style.opacity=Math.random();
				}
			}
		</script>
	</body>
</html>